<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--1. 导入vue  js库-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		
	</head>
	<body>
		<!--2. 定义一个模板-->
		<div id="example1">
			<p>使用插值表达式显示message变量的值:{{message}}</p>
			<p>使用v-html指令显示message变量的值:<span v-html="message"></span></p>
		</div>
		
		<!--3. 编写脚本-->
		<script>
			const cc={
				data(){
					return {
						message :'<span style="color:red">这里的文字将来显示效果为红色</span>'
					}
				}
			}
			Vue.createApp(cc).mount('#example1')
		</script>
	</body>
</html>
